@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Roboto+Slab:wght@300;400;700&display=swap');

/*========================================
  UA LITTLE ROCK - PUBLIC VIEW CSS
  Brand-inspired colors:
  Maroon, Silver, White, Dark Gray
========================================*/

/*----------- Brand Variables -----------*/
:root {
  --ualr-maroon: #6E2639;
  --ualr-maroon-dark: #4C1A27;
  --ualr-maroon-light: #98344F;
  --ualr-silver: #A7A9AC;
  --ualr-gray-light: #EEEEEE;
  --ualr-gray-dark: #333333;
  --ualr-text: #000000;
  --ualr-white: #FFFFFF;
  --ualr-accent-ocean: #245D7A;
  --ualr-accent-pool: #52A3CB;
  --ualr-accent-mint: #91D9C6;
  --ualr-accent-gold: #FFBF00;
  --ualr-website-gray: #F7F7F7;
}

body, input, button, select, textarea {
font-family: 'Roboto', sans-serif !important; 
} 

h1, h2, h3, h4, h5, h6, 
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: 'Roboto Slab', serif !important; font-weight: 700 !important; 
} 

h5, .h5 {
text-transform: none !important; 
} 

/*----------- Header 1: logo / cart / login -----------*/
#header1Container {
  background-color: var(--ualr-website-gray);
  width: 100%;
  color: var(--ualr-text) !important;
}

#header1Wrapper {
  background-color: var(--ualr-website-gray) !important;
  color: var(--ualr-text) !important;
}

/* Cart icon */
#cartInfo .glyphicon-shopping-cart {
  color: var(--ualr-text) !important;
}

/* Login / profile / logout links */
#loginDropdownMenuLink,
#logoutLinkWrapper,
.headerProfileLink,
#loginNameWrapper,
.headerStudentLoginLogoutLink {
  color: var(--ualr-text) !important;
  font-size: 15px !important;
  font-weight: 400;
}

/* Optional hover effect */
#loginDropdownMenuLink:hover,
#logoutLinkWrapper:hover,
.headerProfileLink:hover,
#loginNameWrapper:hover,
.headerStudentLoginLogoutLink:hover {
  color: var(--ualr-maroon) !important;
  text-decoration: none;
}

/*----------- Global Navigation -----------*/
#header3Container {
  display: flex;
  justify-content: center;
  background-color: var(--ualr-white) !important;
}

#header3Wrapper {
  background-color: var(--ualr-white) !important;
}

#globalNavigationBar {
  background-color: var(--ualr-white) !important;
}

.nav-item {
  font-size: 17px !important;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
}

.navbar-light .navbar-nav .nav-link {
  color: var(--ualr-text) !important;
  font-family: 'Roboto', sans-serif;
}

/* Nav hover / active state */
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: var(--ualr-maroon) !important;
}

.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active {
  color: var(--ualr-maroon) !important;
  font-weight: 600;
}

/*----------- Footer -----------*/
footer {
  background-color: var(--ualr-website-gray);
  color: var(--ualr-text) !important;
  padding: 20px;
}

#footer-info {
  line-height: 18px;
}

#footer2Sub2 {
  height: 65px;
}

#footer1Wrapper {
  height: 100%;
}

footer a,
footer > a {
  color: var(--ualr-text) !important;
}

footer a:hover,
footer > a:hover {
  color: var(--ualr-maroon) !important;
  text-decoration: underline;
}

/*----------- Sidebar -----------*/
#sidebar1Module1 {
  background-color: var(--ualr-website-gray) !important;
  color: var(--ualr-text) !important;
}

#sidebar1Wrapper {
  background-color: var(--ualr-white);
}

.nav-pills {
  color: var(--ualr-white) !important;
}

/*----------- Variable Content Block -----------*/
#variableContentBlockPG0156 {
  color: var(--ualr-maroon) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  padding-top: 35px !important;
  padding-bottom: 20px !important;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}

/*----------- Buttons -----------*/
button, .btn {
  background-color: var(--ualr-maroon) !important;
  color: var(--ualr-white) !important;
}

button:hover, .btn:hover {
  background-color: var(--ualr-maroon-light) !important;
  color: var(--ualr-white) !important;
}

#buttonCourseProfileActionEmail .glyphicon-envelope { 
color: #ffffff !important; 
} 

#buttonCourseProfileActionRemind .glyphicon-time  { 
color: #ffffff !important; 
} 

#buttonCourseProfileActionInquiry .glyphicon-question-sign { 
color: #ffffff !important; 
} 

#buttonCourseProfileActionPrint .glyphicon-print { 
color: #ffffff !important; 
} 

/*----------- Advanced Search Options -----------*/

#pageCourseSearch .glyphicon-plus,
.glyphicon-minus { 
color: var(--ualr-white) !important; 
} 

/*----------- Global Link Color Override -----------*/
/* Global override to change all default blue links to Maroon */
a, 
.btn-link, 
.text-primary {
    color: var(--ualr-accent-ocean) !important;
}

/* Hover and active states for all links */
a:hover, 
a:focus, 
a:active,
.btn-link:hover,
.btn-link:focus {
    color: var(--ualr-maroon) !important; 
    text-decoration: underline !important; 
}

/* Site-wide removal of Course Codes and their separators */
.courseCode,
.nameAndCodeSeparator {
    display: none !important;
}

/* ==========================================================================
   ACCORDION CARDS: RESPONSIVE LAYOUT (STRICTLY SCOPED TO PROGRAM AREAS)
   ========================================================================== */

/* Desktop Grid Layout (Screens 768px and wider) */
@media (min-width: 768px) {
    /* Target ONLY the specific containers for the 2-column grid wrapper */
    .programareasaccordian, .programareasaccordion, #programareasaccordian, #programareasaccordion {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        column-gap: 20px !important;
        row-gap: 15px !important;
        align-items: start !important;
    }
    
    /* Target ONLY panels/cards residing inside the specific containers */
    .programareasaccordian .panel, .programareasaccordian .card, .programareasaccordian .panel-default,
    .programareasaccordion .panel, .programareasaccordion .card, .programareasaccordion .panel-default,
    #programareasaccordian .panel, #programareasaccordian .card, #programareasaccordian .panel-default,
    #programareasaccordion .panel, #programareasaccordion .card, #programareasaccordion .panel-default {
        background-color: #ffffff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        margin-bottom: 0 !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
        position: relative !important; /* Bounds the clickable link */
    }
}

/* Mobile Stack Layout (Screens smaller than 768px) */
@media (max-width: 767px) {
    .programareasaccordian, .programareasaccordion, #programareasaccordian, #programareasaccordion {
        display: block !important;
    }
    
    .programareasaccordian .panel, .programareasaccordian .card, .programareasaccordian .panel-default,
    .programareasaccordion .panel, .programareasaccordion .card, .programareasaccordion .panel-default,
    #programareasaccordian .panel, #programareasaccordian .card, #programareasaccordian .panel-default,
    #programareasaccordion .panel, #programareasaccordion .card, #programareasaccordion .panel-default {
        background-color: #ffffff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        margin-bottom: 15px !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
        position: relative !important;
    }
}

/* ==========================================================================
   STRETCHED LINK & TEXT-ONLY HOVER STATES (STRICTLY SCOPED)
   ========================================================================== */

/* 1. Clear inner positioning ONLY for structural elements within these exact containers */
.programareasaccordian .panel-heading, .programareasaccordion .panel-heading,
.programareasaccordian .panel-title, .programareasaccordion .panel-title,
.programareasaccordian .panel-body, .programareasaccordion .panel-body,
.programareasaccordian a, .programareasaccordion a,
#programareasaccordian .card-header, #programareasaccordion .card-header,
#programareasaccordian .card-title, #programareasaccordion .card-title,
#programareasaccordian .card-body, #programareasaccordion .card-body {
    position: static !important;
}

/* 2. Restrict the clickable stretched layer to the specific container links */
.programareasaccordian .panel a::after, .programareasaccordion .panel a::after,
#programareasaccordian .card a::after, #programareasaccordion .card a::after,
.programareasaccordian .card a::after, .programareasaccordion .card a::after,
#programareasaccordian .panel a::after, #programareasaccordion .panel a::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99999 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* 3. Text Hover State: Restrict maroon text-swaps strictly to these specific containers */
.programareasaccordian .panel:hover a, .programareasaccordion .panel:hover a,
#programareasaccordian .card:hover a, #programareasaccordion .card:hover a,
.programareasaccordian a:hover, .programareasaccordion a:hover,
#programareasaccordian a:hover, #programareasaccordion a:hover {
    color: #6E263C !important;
    text-decoration: underline !important;
}

/* Suppress the Course Description heading only */
#courseProfileOfficialCourseDescription h2{
    display: none !important;
}
/* Isolates the maroon title change strictly to the Course Profile page */
#pageCourseProfile #pageHeader h1 {
    color: #6E263C !important;
}

/* Removes instruction method from course profile header */
#pageCourseProfile #pageHeader #courseProfileInstructionMethods {
	Display: none !important;
}

/* Ensure all images inside the profile/column area fill the width */
#courseProfileOfficialCourseDescription img,
.course-profile-sidebar img {
    width: 100% !important;
    height: auto !important; /* Maintains the aspect ratio */
    display: block !important;
    object-fit: cover !important; /* Ensures the image fills the area without distortion */
}

/*Removes credit type from course fee */
#pageCourseProfile .creditType {
	Display: none !important;
}


/* Update the cart notification badge to UALR Gold */
#cartCount {
    background-color: #ffbf00 !important;
    color: #ffffff !important; /* Keeps the number white for clean contrast */
}

/*Removes Extra Sock Items in Footer on Home */

#pagePublicHome #contentModule5 {
	Display: none !important;
}

/* ==========================================================================
   FINAL FIX FOR UPCOMING SECTIONS: RESTORING TEXT VISIBILITY
   ========================================================================== */

/* 1. Move the website gray background and border to the actual container box */
#pageCourseProfile .card-header.panelHeadingToggle {
    background-color: var(--ualr-website-gray) !important;
    border: 1px solid #e0e0e0 !important;
    position: relative !important; /* Keeps the click-button bounded inside this box */
}

/* 2. Strip the background off the button overlay so it becomes completely see-through */
button.courseSectionHeaderToggle,
.btn.courseSectionHeaderToggle {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important; /* Keeps the invisible click layer on top */
    box-shadow: none !important;
}

/* 3. Explicitly force all hidden text elements inside to be visible and black */
#pageCourseProfile .card-header.panelHeadingToggle .courseSectionTitle,
#pageCourseProfile .card-header.panelHeadingToggle .courseSectionSemester,
#pageCourseProfile .card-header.panelHeadingToggle .courseSectionDelivery,
#pageCourseProfile .card-header.panelHeadingToggle .glyphicon {
    color: var(--ualr-text) !important;
    position: relative !important;
    z-index: 1 !important; /* Ensures text renders beautifully behind the click layer */
}

/* ==========================================================================
   REMOVE UNWANTED BORDERS FROM DELIVERY OPTIONS & COURSE FEES TABLES
   ========================================================================== */

#pageCourseProfile table.sectionDeliveryOptions,
#pageCourseProfile table.sectionDeliveryOptions tr,
#pageCourseProfile table.sectionDeliveryOptions td,
#pageCourseProfile table.sectionTuitionProfiles,
#pageCourseProfile table.sectionTuitionProfiles tr,
#pageCourseProfile table.sectionTuitionProfiles td {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* ==========================================================================
   SITEWIDE BUTTON FIX: REMOVE BLUE BORDERS AND FOCUS GLOWS
   ========================================================================== */

/* Strip default blue borders and shadows from all button elements globally */
button, 
.btn, 
.btn-primary {
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Ensure blue outlines do not reappear on hover, focus, or click states */
button:hover, .btn:hover, .btn-primary:hover,
button:focus, .btn:focus, .btn-primary:focus,
button:active, .btn:active, .btn-primary:active {
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   STUDENT LOGIN PORTAL
   ========================================================================== */

/* Style the SSO section into a clean, distinctive card */
#portalExtAuthLoginPanel {
    background-color: #f8f9fa !important; /* Soft, clean neutral gray */
    border: 1px solid #e2e8f0 !important;  /* Subtle, modern light border */
    border-radius: 8px !important;         /* Smooth, rounded corners */
    padding: 25px !important;              /* Inset padding so contents don't touch the border */
    margin-bottom: 20px !important;        /* Ensures spacing if stacked on smaller screens */
}

/* Optional: Make the "Continue" SSO button look more prominent and cohesive */
#portalExtAuthLoginPanel .btn, 
#portalExtAuthLoginPanel button,
#portalExtAuthLoginPanel a.btn {
    display: block !important;
    width: 100% !important;
    margin-top: 15px !important;
}

/* 1. Target the inner row directly underneath #existingStudentDiv and force it to stack vertically */
#existingStudentDiv > .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important; /* Adds precise, clean vertical spacing between the two panels */
}

/* 2. Override the Bootstrap 'col-md-6' behavior so both panels expand to fill the full width */
#portalExtAuthLoginPanel, 
#portalNativeLoginPanel {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* 1. Style the Guest Login section wrapper */
#portalNativeLoginPanel {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 25px !important;
}

/* 2. Target ONLY the main login button by explicitly ignoring the eye toggle class */
#portalNativeLoginPanel button:not(.passwordVisibilityButton),
#portalNativeLoginPanel input[type="submit"] {
    background-color: #245d7a !important;  /* UALR Ocean */
    border-color: #245d7a !important;
    color: #ffffff !important;
    display: block !important;
    width: 100% !important;                /* Spans full card width for symmetry */
    margin-top: 20px !important;
    font-weight: bold !important;
    padding: 10px 20px !important;         /* Comfortable button height */
    height: auto !important;
}

/* Hover effect for the main button */
#portalNativeLoginPanel button:not(.passwordVisibilityButton):hover,
#portalNativeLoginPanel input[type="submit"]:hover {
    background-color: #52a3cb !important;  /* UALR Pool on hover */
    border-color: #52a3cb !important;
}

/* 3. Hard reset for the eye toggle button to ensure it rejects the charcoal styles */
#portalNativeLoginPanel button.passwordVisibilityButton {
    background-color: transparent !important;
    border: none !important;
    width: auto !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    box-shadow: none !important;
    color: #58565A !important;             /* Restores native icon color[cite: 1] */
}

/* Cleanly remove the redundant "I have an account" header block */
#existingStudentDiv > .card.sectionHeader {
    display: none !important;
}

/* 1. Target the .card-body class to remove wrapper */
#newStudentDiv .card-body.sectionHeader,
#newStudentDiv .card-body {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 20px !important;            /* This kills the stubborn inner indentation entirely */
    margin: 0 0 15px 0 !important;    /* Keeps a clean gap only at the bottom */
}

/* 3. Make the "Create Account" button full-width to match the visual weight of the left side */
#newStudentDiv button,
#newStudentDiv input[type="submit"],
#newStudentDiv .btn {
    display: block !important;
    width: 100% !important;
    float: none !important; /* Overrides Bootstrap's float-right to allow full-width expansion */
    margin-top: 20px !important;
    padding: 10px 20px !important;
    font-weight: bold !important;
    height: auto !important;
}

/* Change mobile menu button to light gray */
.navbar-toggler,
button.navbar-toggler,
.navbar-toggle {
    background-color: #f7f7f7 !important;
    border: 1px solid #e2e8f0 !important; /* Subtle border so it doesn't bleed into a white header */
}

/* Safety fix: Ensures the hamburger icon lines inside turn dark against the light background */
.navbar-toggler-icon,
.navbar-toggle .icon-bar {
    filter: invert(34%) sepia(6%) saturate(272%) hue-rotate(216deg) brightness(92%) contrast(84%) !important;
}

/* Interactive hover state */
.navbar-toggler:hover,
.navbar-toggle:hover {
    background-color: #ededed !important;
}

/* Hide specific search elements on the Certificate Search page */
#pageCertificateSearch #certificateSearchKeyword,
#pageCertificateSearch #advancedSearchPanel,
#pageCertificateSearch #buttonReset,
#pageCertificateSearch #buttonSearch {
    display: none !important;
}

/* Hide the reset button on the Course Search page */
#pageCourseSearch #buttonReset {
    display: none !important;
}

/* Clean up the Instructor Login page by hiding the native login panel and the duplicate section header */
#pageInstructorLogin #portalNativeLoginPanel,
#pageInstructorLogin #instructorLoginOptionsContainer .card.card-body.sectionHeader {
    display: none !important;
}

/* Hide the top checkout button on the Shopping Cart page */
#pageShoppingCart #buttonCheckoutTop {
    display: none !important;
}

/* ==========================================================================
   STUDENT & INSTRUCTOR PROFILE SIDEBAR MENUS
   ========================================================================== */

/* 1. Ensure menu container background stays #f7f7f7 at all times */
#pageStudentProfile #sidebar1Module1,
#pageInstructorProfile #sidebar1Module1,
#studentMenu,
#instructorMenu,
.portalMenu {
    background-color: var(--ualr-website-gray) !important;
    background: var(--ualr-website-gray) !important;
}

/* 2. Default link styling: Dark text, no blue borders, transparent background */
#studentMenu a,
#instructorMenu a,
#studentMenu .nav-link,
#instructorMenu .nav-link,
.portalMenu .nav-link {
    color: var(--ualr-text) !important;
    background-color: transparent !important;
    background: transparent !important;
    border-left: 4px solid transparent !important;
    text-decoration: none !important;
    font-weight: 400 !important;
}

/* 3. Hover state: Maroon text with underline */
#studentMenu a:hover,
#instructorMenu a:hover,
#studentMenu .nav-link:hover,
#instructorMenu .nav-link:hover,
.portalMenu .nav-link:hover {
    color: var(--ualr-maroon) !important;
    text-decoration: underline !important;
    background-color: transparent !important;
}

/* 4. Active state / ScrollSpy override: Stops blue highlights on scroll */
#studentMenu .active > a,
#instructorMenu .active > a,
#studentMenu .nav-link.active,
#instructorMenu .nav-link.active,
#studentMenu li.active > a,
#instructorMenu li.active > a,
.portalMenu .active > a,
.sidebarScrollSpy .active > a {
    background-color: transparent !important;
    background: transparent !important;
    color: var(--ualr-maroon) !important;
    font-weight: 700 !important;
    border-left: 4px solid var(--ualr-maroon) !important;
    text-decoration: none !important;
}

/* ==========================================================================
   STUDENT TIMETABLE (DHTMLX SCHEDULER CLEANUP)
   ========================================================================== */

/* 1. Style the day header row (Sun, Mon, Tue...) */
#pageStudentTimetable .dhx_cal_header {
    border-bottom: 2px solid #e0e0e0 !important;
}

#pageStudentTimetable .dhx_scale_bar {
    background-color: var(--ualr-website-gray) !important;
    color: var(--ualr-text) !important;
    font-weight: 700 !important;
    border-right: 1px solid #eeeeee !important;
}

/* 2. Unified Solid Maroon Event Cards */
#pageStudentTimetable .dhx_cal_event {
    background-color: var(--ualr-maroon) !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
    border: none !important;
}

/* Force all inner card sections to use the exact same maroon background */
#pageStudentTimetable .dhx_cal_event div,
#pageStudentTimetable .dhx_cal_event .dhx_footer,
#pageStudentTimetable .dhx_cal_event .dhx_event_resize,
#pageStudentTimetable .dhx_cal_event .dhx_title,
#pageStudentTimetable .dhx_cal_event .dhx_event_move,
#pageStudentTimetable .dhx_cal_event .dhx_header,
#pageStudentTimetable .dhx_cal_event .dhx_body {
    background-color: var(--ualr-maroon) !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-family: 'Roboto', sans-serif !important;
}

/* 3. Header Bar (Time) styling */
#pageStudentTimetable .dhx_cal_event .dhx_title,
#pageStudentTimetable .dhx_cal_event .dhx_header {
    font-weight: 700 !important;
    padding: 4px 4px 2px 4px !important;
    text-align: center !important;
}

/* 4. Card Body: Hides original title, inserts centered "Hover for details" */
#pageStudentTimetable .dhx_cal_event .dhx_body {
    font-size: 0 !important;
    padding: 0 4px 6px 4px !important;
    text-align: center !important;
}

#pageStudentTimetable .dhx_cal_event .dhx_body::after {
    content: "Hover for details" !important;
    font-size: 11px !important;
    display: block !important;
    color: #ffffff !important;
    opacity: 0.95;
    font-style: italic;
}

/* ==========================================================================
   HIDE UNUSED PORTAL & HEADER DROPDOWN MENU ITEMS
   ========================================================================== */

/* 1. Hide anchor links across Sidebars and Main Header Dropdown */
#studentMenu a[href*="studentStudentServices"],
#instructorMenu a[href*="studentStudentServices"],
.portalMenuDropDownContainer a[href*="studentStudentServices"],

#studentMenu a[href*="publicSpecialRequest"],
#instructorMenu a[href*="publicSpecialRequest"],
.portalMenuDropDownContainer a[href*="publicSpecialRequest"],

#studentMenu a[href*="studentNews"],
#instructorMenu a[href*="studentNews"],
.portalMenuDropDownContainer a[href*="studentNews"],

#studentMenu a[href*="publicCourseBasket"],
#instructorMenu a[href*="publicCourseBasket"],
.portalMenuDropDownContainer a[href*="publicCourseBasket"] {
    display: none !important;
}

/* 2. Hide surrounding list item wrappers to prevent blank gaps */
#studentMenu li:has(a[href*="studentStudentServices"]),
#instructorMenu li:has(a[href*="studentStudentServices"]),
.portalMenuDropDownContainer li:has(a[href*="studentStudentServices"]),

#studentMenu li:has(a[href*="publicSpecialRequest"]),
#instructorMenu li:has(a[href*="publicSpecialRequest"]),
.portalMenuDropDownContainer li:has(a[href*="publicSpecialRequest"]),

#studentMenu li:has(a[href*="studentNews"]),
#instructorMenu li:has(a[href*="studentNews"]),
.portalMenuDropDownContainer li:has(a[href*="studentNews"]),

#studentMenu li:has(a[href*="publicCourseBasket"]),
#instructorMenu li:has(a[href*="publicCourseBasket"]),
.portalMenuDropDownContainer li:has(a[href*="publicCourseBasket"]) {
    display: none !important;
}

/* ==========================================================================
   SITEWIDE FOOTER SPACING
   ========================================================================== */

footer {
    margin-top: 50px !important; /* Adjust to 40px or 60px depending on preferred gap */
}

/* ==========================================================================
   COOKIE CONSENT BANNER BRANDING (LIGHT THEME)
   ========================================================================== */

/* 1. Main Banner Bar Styling */
.cc-window.cc-banner {
    background-color: #eeeeee !important;
    border-top: 1px solid #dddddd !important; /* Subtle separator line against page content */
    color: var(--ualr-text, #333333) !important;
    font-family: 'Roboto', sans-serif !important;
    padding: 12px 20px !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08) !important;
}

/* 2. Banner Message Text & Policy Links */
.cc-window .cc-message {
    color: var(--ualr-text, #333333) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Policy Links ("cookie policy" & "privacy policy") */
.cc-window .cc-message a,
.cc-window .cc-message a:visited {
    color: #245d7a !important; /* UALR Ocean Blue */
    text-decoration: underline !important;
    font-weight: 500 !important;
}

.cc-window .cc-message a:hover {
    color: var(--ualr-maroon, #6E2639) !important;
}

/* 3. Accept Button Styling */
.cc-window .cc-btn.cc-allow {
    background-color: var(--ualr-maroon, #6E2639) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 8px 18px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    transition: background-color 0.2s ease !important;
    text-decoration: none !important;
}

.cc-window .cc-btn.cc-allow:hover {
    background-color: var(--ualr-maroon-light, #98344F) !important;
    color: #ffffff !important;
}

/* 4. Deny Button Styling */
.cc-window .cc-btn.cc-deny {
    background-color: transparent !important;
    color: var(--ualr-text, #555555) !important;
    border: none !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.cc-window .cc-btn.cc-deny:hover {
    color: var(--ualr-maroon, #6E2639) !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   TEMPORARILY HIDE UNUSED PROGRAM AREAS ACCORDION
   ========================================================================== */

#programAreasAccordian,
#programAreasAccordion,
.programareasaccordian,
.programareasaccordion {
    display: none !important;
}

/* ==========================================================================
   COURSE SEARCH RESULTS ACCORDION: WHITE TOGGLE ICON
   ========================================================================== */

/* 1. Target accordion buttons and text/icon pseudo-elements under the page ID */
#pageCourseSearchResults .panelHeadingToggle button,
#pageCourseSearchResults .panelHeadingToggle button *,
#pageCourseSearchResults .panelHeadingToggle button::before,
#pageCourseSearchResults .panelHeadingToggle button::after {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* 2. Fallback: If the icon is an SVG image or font icon inside the button */
#pageCourseSearchResults .panelHeadingToggle button i,
#pageCourseSearchResults .panelHeadingToggle button svg,
#pageCourseSearchResults .panelHeadingToggle button img {
    color: #ffffff !important;
    fill: #ffffff !important;
    filter: brightness(0) invert(1) !important; /* Converts dark SVGs/images to pure white */
}

/* ==========================================================================
   COURSE SEARCH GRID VIEW: COMPLETE STYLING
   ========================================================================== */

/* 1. Grid Container (Flexbox with clean 24px spacing strictly between cards) */
#courseSearchResult_grid ul.grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* 2. Uniform Floating Card Styling */
#courseSearchResult_grid ul.grid li,
#pageCourseSearchResults #courseSearchResult_grid ul.grid li {
    width: 250px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 15px !important;
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Card Hover Lift Effect */
#courseSearchResult_grid ul.grid li:hover,
#pageCourseSearchResults #courseSearchResult_grid ul.grid li:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12) !important;
    border-color: #e0e0e0 !important;
}

/* 3. Stretch & Crop Thumbnail Images (Removes empty side space inside card) */
#courseSearchResult_grid ul.grid li img.FeaturedImage,
#courseSearchResult_grid ul.grid li img {
    width: 100% !important;
    height: 140px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    display: block !important;
    margin-bottom: 12px !important;
}

/* 4. "Available" Badge (UALR Gold) */
#courseSearchResult_grid .courseAvailability,
#courseSearchResult_grid span[class*="courseAvailability"] {
    background-color: var(--ualr-accent-gold, #FFBF00) !important;
    color: #000000 !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    padding: 3px 8px !important;
    font-size: 12px !important;
}

/* 5. Non-Title Metadata (Campus, Delivery, Code) to Plain Text */
#courseSearchResult_grid ul.grid li span.courseCampuses a,
#courseSearchResult_grid ul.grid li span.courseCampuses a:link,
#courseSearchResult_grid ul.grid li span.courseCampuses a:visited,
#courseSearchResult_grid ul.grid li span.courseCampuses a:hover,
#courseSearchResult_grid ul.grid li span.courseCampuses a:active,
#courseSearchResult_grid ul.grid li span.courseDelivery a,
#courseSearchResult_grid ul.grid li span.courseDelivery a:link,
#courseSearchResult_grid ul.grid li span.courseDelivery a:visited,
#courseSearchResult_grid ul.grid li span.courseDelivery a:hover,
#courseSearchResult_grid ul.grid li span.courseDelivery a:active,
#courseSearchResult_grid ul.grid li .courseCode {
    color: var(--ualr-text, #333333) !important;
    text-decoration: none !important;
    cursor: default !important;
}

/* 6. Remove Link Focus/Hover Outlines Inside Cards */
#courseSearchResult_grid ul.grid li a,
#courseSearchResult_grid ul.grid li a:focus,
#courseSearchResult_grid ul.grid li a:hover,
#courseSearchResult_grid ul.grid li a:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}